<script setup>
import { ref, reactive, onMounted } from 'vue'
import { JumpInfo } from '@/api/user'
import { selectAllDep } from '@/api/department'
import { selectPoInfo } from '../../api/position'
import { useUserStore } from '@/stores/user'
import { updateUserDepart } from '@/api/department'
import { ElMessage } from 'element-plus'
const form = reactive({
  name: '',
  password: '',
  phone: '',
  email: '',
  position: ''
})
const input1 = ref('')

const bumen = reactive({
  selectedId: null // 部门id
})

const zhiwei = reactive({
  selectedId: null  //职位id
})

const bumen1 = reactive({
  selectedId: null // 部门id
})

const zhiwei1 = reactive({
  selectedId: null  //职位id
})




onMounted(() => {
  optionIn();
  optionIn2();
});

const userStore = useUserStore()

const dianji = async () => {
  if (userStore.user.name != input1.value) {
    const res = await JumpInfo({
      name: input1.value
    })
    if (res) {
      form.name = res.data.data.name
      form.password = res.data.data.password
      form.phone = res.data.data.phone
      form.email = res.data.data.email
      form.position = res.data.data.positionId
      bumen.selectedId = res.data.data.departmentId
      zhiwei.selectedId = res.data.data.positionName
    }
  }
}


//刷新
const refhsh = () => {
  form.name = null
  form.password = null
  form.phone = null
  form.email = null
  form.position = null
  bumen.selectedId = null
  input1.value = null
  zhiwei.selectedId = null
  bumen1.selectedId = null
  zhiwei1.selectedId = null
}

//改之前的部门
const optionInfo = ref()

//改之前的职责
const optionInfo2 = ref()


//改之后的部门
const optionInfo3 = ref()

//改之后的职责
const optionInfo4 = ref()


//查询职位
const optionIn2 = async () => {
  try {
    const res = await selectPoInfo();
    if (res && res.data) {
      optionInfo2.value = res.data.data
      optionInfo4.value = res.data.data
    } else {
      console.log("No data received");
    }
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}


//查询部门
const optionIn = async () => {
  try {
    const res = await selectAllDep();
    if (res && res.data) {
      optionInfo.value = res.data.data
      optionInfo3.value = res.data.data
    } else {
      console.log("No data received");
    }
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}



const sumbit = async () => {
  const res = await updateUserDepart({
    departmentId: bumen1.selectedId,
    positionId: zhiwei1.selectedId,
    updateBy: userStore.user.name,
    name: form.name
  })
  if (res.data.code == "200") {
    ElMessage({
      type: 'success',
      message: '修改成功',
    })
    refhsh()
  }
}


</script>

<template>
  <el-card class="form-card">
    <el-button type="primary" @click="dialogFormVisible = true">岗位调动</el-button>
    <el-button type="primary" @click="refhsh()">重置</el-button>
  </el-card>
  <el-card style="margin-top: 10px;">
    <el-input v-model="input1" style="width: 250px" placeholder="搜索姓名" :prefix-icon="Search" />
    <el-button type="primary" style="margin-left: 10px;" @click="dianji()">搜索</el-button>
  </el-card>
  <el-row style="margin-top: 20px;">
    <el-col :span="8">
      <div style="font-size: 18px; font-weight: 400; color: gray;">岗位调任前部门</div>
      <el-select v-model="bumen.selectedId" placeholder="请选择" style="width: 300px; margin-top: 15px;">
        <el-option v-for="option in optionInfo" :key="option.value" :label="option.departmentName"
          :value="option.departmentId" :disabled="true" />
      </el-select>

      <div style="font-size: 18px; font-weight: 400; color: gray; margin-top: 15px;">岗位调任前职位</div>
      <el-select v-model="zhiwei.selectedId" placeholder="请选择" style="width: 300px; margin-top: 10px;">
        <el-option v-for="option1 in optionInfo2" :key="option1.value" :label="option1.positionName" :value="option1.id"
          :disabled="true" />
      </el-select>


      <div style="font-size: 18px; font-weight: 400; color: gray; margin-top: 15px;">岗位调任后部门</div>
      <el-select v-model="bumen1.selectedId" placeholder="请选择" style="width: 300px; margin-top: 10px;">
        <el-option v-for="option2 in optionInfo3" :key="option2.value" :label="option2.departmentName"
          :value="option2.departmentId" />
      </el-select>

      <div style="font-size: 18px; font-weight: 400; color: gray; margin-top: 15px;">岗位调任后职位</div>
      <el-select v-model="zhiwei1.selectedId" placeholder="请选择" style="width: 300px; margin-top: 10px;">
        <el-option v-for="option in optionInfo4" :key="option.value" :label="option.positionName" :value="option.id" />
      </el-select>

      <div style="margin-top: 20px; text-align: center; width: 280px;">
        <el-button type="primary" style="width: 100px;" @click="sumbit()">提交</el-button>
      </div>
    </el-col>
    <el-col :span="16">
      <div style="font-size: 18px; font-weight: 400; color: gray; margin-bottom: 10px;">正常流程</div>
      <el-form :model="form" :rules="rules" ref="formRef" class="form-style">
        <el-form-item label="姓名:" prop="name" style="margin-left: 15px;">
          <el-input v-model="form.name" autocomplete="off" :disabled="true" />
        </el-form-item>
        <el-form-item label="密码:" prop="password" style="margin-left: 15px;">
          <el-input v-model="form.password" type="password" autocomplete="off" :disabled="true" />
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input v-model="form.phone" autocomplete="off" :disabled="true" />
        </el-form-item>
        <el-form-item label="邮件:" prop="email" style="margin-left: 15px;">
          <el-input v-model="form.email" autocomplete="off" :disabled="true" />
        </el-form-item>
        <el-form-item label="职位:" prop="position" style="margin-left: 15px;">
          <el-radio-group v-model="form.position">
            <el-radio border :label="3">经理</el-radio>
            <el-radio border :label="4">员工</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="部门:" prop="bumen.selectedId" style="margin-left: 5px;">
          <el-select v-model="bumen.selectedId" placeholder="请选择" style="width: 115px; margin-left: 10px;">
            <el-option v-for="option in optionInfo" :key="option.value" :label="option.departmentName"
              :value="option.departmentId" />
          </el-select>
        </el-form-item>
        <div style="margin-top: 20px; text-align: center; width: 220px;">
          <el-button type="primary" style="width: 100px;" @click="sumbit()">提交</el-button>
        </div>
      </el-form>
    </el-col>
    <!-- <el-col :span="6">
        <el-card class="last">
            <div>提交信息</div>
        </el-card>
    </el-col> -->
  </el-row>
</template>

<style scoped>
    .last{
      width: 80%;
      margin: auto;
      height: 400px;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      border: 1px solid #e4e7ed;
      
    }
      .last:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    background-color: #f9f9f9;
  }
</style>